<template>
  <div>
    <h1>路由守卫</h1>
    <input type="text">
  </div>
</template>

<script>
export default {

  /*
    1.全局路由守卫

    2.局部路由守卫
      beforeRouteEnter 进入路由前的验证
      beforeRouteLeave 离开路由前的验证
      beforeRouteUpdate 路由更新前的验证
    3.路由独享守卫 beforeEnter
  
     //  to 到那里去  from 到那里去 next 是否放行
  */
  beforeRouteEnter(to, from, next) {
    console.log(to.path, '到哪去');
    console.log(from.path, '从哪来');
    //放行
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log(to.path, '到哪去');
    console.log(from.path, '从哪来');
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log(to.path, '到哪去');
    console.log(from.path, '从哪来');
    next()
  },
  data() {
    return {

    }
  },
}
</script>

<style lang="scss" scoped></style>